<template>
    <div class="chart" id="threechart">
    </div>
</template>

<script>
    import { inject, onMounted, reactive  } from "vue";
    import emitter from '../bus'

    export default {
        setup() {
      // 引入echarts
      let $echarts = inject("echarts");
      let $http = inject("axios");
      // 数据接收
      let threeData = reactive({});
      let site1 = reactive([]);
      let data1 = reactive([]);
      let site2 = reactive([]);
      let data2 = reactive([]);
      let myChart;//全局变量
      console.log(myChart)
      function setData(site,mouth) {
        data2=data1[0]
        site2=site1[0]
        data1.splice(0,data1.length)
        site1.splice(0,site1.length)
        let data=[]
        if (threeData.data.length > 0) {
            for (let item of threeData.data) {
              if(item['站点']==site&&item['月']==mouth){
                data.push(item['SO2']);
                data.push(item['NO2']);
                data.push(item['CO']);
                data.push(item['O3']);
                data.push(item['PM10']);
                data.push(item['PM2.5']);
                data1.push(data)
              }
            }
        }
        site=site.concat(mouth)
        site1.push(site)
        console.log(data1)
        data1 =data1.map(obj=>{
          return  Object.values(obj)
        })
        console.log('这是雷达图数据')
        console.log('site1:',site1[0])
        console.log('data1:',data1[0])
        console.log('site2:',site2)
        console.log('data2:',data2)
      }
      async function getState() {
        threeData = await $http({ url: "/sitemouth/site-mouth" });
      }
      onMounted(() => {
      drawRadar("九州社区",1)
      emitter.on('site', (site) => {
        emitter.on('mouth', (mouth) => {
          drawRadar(site,mouth)
        })
      })

      function drawRadar(site,mouth){
        if (myChart != null && myChart != "" && myChart != undefined) {
            myChart.dispose();//销毁
        }
        // 初始化echarts
        myChart = $echarts.init(document.getElementById("threechart"));
        getState().then(() => {
          setData(site,mouth);
          myChart.setOption({
          //   title: {
          //   text: '不同站点不同月份六项数据对比'
          // },
          legend: {
            data: [site1[0], site2]
          },
          radar: {
            // shape: 'circle',
            indicator: [
              { name: 'SO2', max: 30 },
              { name: 'NO2', max: 60 },
              { name: 'CO', max: 4 },
              { name: 'O3', max: 120 },
              { name: 'PM10', max: 260 },
              { name: 'PM2.5', max: 180 }
            ]
          },
          series: [
            {
              // name: 'site1 vs site2',
              type: 'radar',
              data: [
                {
                  value: data1[0],
                  name: site1[0],
                  areaStyle: {
                    color: 'rgba(255, 228, 52, 0.6)'
                  },
                },
                {
                  value: data2,
                  name: site2,
                  areaStyle: {
                    color: 'rgba(255,145,124,0.6)'
                  },
                }
              ]
            }
          ]
          });
          window.onresize = myChart.resize;
          myChart.on("click", params => {
            console.log('这是雷达图的数据',params.name)
            //提取中文
            let Radarsite=params.name.replace(/[^\u4E00-\u9FA5]/g,'')
            //提取英文
            // console.log(params.name.replace(/[^a-zA-Z]/g, ''));
            //提取数字
            let Radarmouth =params.name.replace(/[^\d.]/g, '')
            emitter.emit("Radarsite", Radarsite)
            emitter.emit("Radarmouth",Radarmouth)
            })
        });
      
      }
      });
      return {
        getState,
        threeData,
        site1,
        site2,
        data1,
        data2,
        setData,
        myChart,
      };
    },
    }
</script>

<style lang="css" scoped>
  .chart {
    height: 340px;
  }
</style>